<template>
  <view class="tarbar">
    <view
        class=".tarbar-list"
        :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
            }"
    >
      <view class="tarbar-list-ul">
        <view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
          <block>
            <view class="tarbar-list-li-icon">
				<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
			</view>
            <view class="tarbar-list-li-name">{{ item.text }}</view>
          </block>
        </view>
      </view>
    </view>
    <block v-if="isShowMask"><release-popup @close-mask="closeMask"></release-popup></block>
  </view>
</template>

<script>
export default {
  components: {
    // 'release-popup': releasePopup,
  },
  props: ['selected'],
  data() {
    return {
      tabBar: {
        color: '#000000',
        selectedColor: '#1D2C6D',
        borderStyle: '#ccc',
        backgroundColor: '#fff',
        position: 'bottom',
        list: [
          {
            pagePath: '/pages/tea/v2/index',
            iconPath: '/static/tarbar/1110.png',
            selectedIconPath: '/static/tarbar/1111.png',
            text: '首页'
          },
          {
            pagePath: '/pages/tea/voucher/index',
            iconPath: '/static/tarbar/2220.png',
            selectedIconPath: '/static/tarbar/2222.png',
            text: '优惠中心'
          },
          {
            pagePath: '/pages/user/order/list',
            iconPath: '/static/tarbar/3330.png',
            selectedIconPath: '/static/tarbar/3333.png',
            text: '我的订单'
          },
          {
            pagePath: '/pages/user/info/home',
            iconPath: '/static/tarbar/4440.png',
            selectedIconPath: '/static/tarbar/4444.png',
            text: '个人中心'
          }
        ]
      },
      oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩
      isShowMask: false
    };
  },
  onLoad() {},
  methods: {
    setSelected(index) {
	  this.oldSelected = index;
      uni.reLaunch({url: this.tabBar.list[index].pagePath})
    },

    /*setSelected(index) {
      this.oldSelected = index;
      uni.switchTab({
        url: this.tabBar.list[index].pagePath,
        success: function(e) {
          var page = getCurrentPages().pop();
          if (page == undefined || page == null) return;
          page.onLoad();
        }
      });
      this.$forceUpdate();
    },*/

    closeMask() {
      this.isShowMask = false;
    }
  }
};
</script>

<style>
.tarbar {
  width: 100%;
  z-index: 9999;
  position: fixed;
}
.tarbar-list {
  width: 100%;
  height: 120upx;
  background: #4d586f;
  position: fixed;
  left: 0;
  bottom: 0;
}
.tarbar-list-ul {
  width: 100%;
  height: 100%;
  padding: 20upx 50upx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.tarbar-list-li {
  width: 80upx;
  height: 80upx;
}
.tarbar-list-li-icon {
  width: 50upx;
  height: 50upx;
  margin: 0 auto;
}
.tarbar-list-li-icon image {
  width: 50upx;
  height: 50upx;
}
.tarbar-list-li-name {
  width: 100%;
  text-align: center;
  line-height: 30upx;
  font-size: 20upx;
  height: 30upx;
}
.tarbar-list-li-center {
  width: 100upx;
}
/* .tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image {
  width: 90upx;
  height: 60upx;
} */
</style>